<template>
  <div class="dashboard-container">
    <!-- 顶部  通知  代办 -->
    <el-row class="static">
      <div class="left">
        <div class="card">
          <img
            src="http://www-wms-java.itheima.net/img/dashboard-banner-left@2x.5afd2949.png"
            class="imgL"
          >
          <img
            src="http://www-wms-java.itheima.net/img/dashboard-banner-right@2x.28195570.png"
            class="imgR"
          >
          <img
            src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
            class="avatar"
          >
          <div class="username">仓储管理员</div>
          <p class="subject-title">我TM就要这三杯里面的中杯!!</p>
          <p class="subject-author">—— 罗永浩</p>
          <div class="site">北京总仓</div>
        </div>
        <div class="info fff">
          <div class="subject">待办信息</div>
          <div class="item-list">
            <el-col :span="8">
              <div
                class="backlog"
                @click="$router.push('/manage-storage-in/list')"
              >
                <div class="icon">
                  <i class="el-icon-folder-add" />
                </div>
                <div class="title">入库单</div>
                <div class="bottom">
                  <span class="label">新增</span>
                  <span class="value">{{
                    todoData.length && todoData[0].value1
                  }}</span>
                  <span class="label">待审核</span>
                  <span class="value" style="color: rgb(0, 118, 255)">{{
                    todoData.length && todoData[0].value2
                  }}</span>
                </div>
              </div>
            </el-col>
            <el-col :span="8" class="center">
              <div
                class="backlog"
                @click="$router.push('/manage-storage-out/list-out')"
              >
                <div class="icon" style="background: rgb(255, 178, 0)">
                  <i class="el-icon-folder-remove" />
                </div>
                <div class="title">出库单</div>
                <div class="bottom">
                  <span class="label">新增</span>
                  <span class="value">{{
                    todoData.length && todoData[1].value1
                  }}</span>
                  <span class="label">待审核</span>
                  <span class="value" style="color: rgb(255, 178, 0)">{{
                    todoData.length && todoData[1].value2
                  }}</span>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                class="backlog"
                @click="$router.push('/manage-storage/list')"
              >
                <div class="icon" style="background: rgb(255, 113, 0)">
                  <i class="el-icon-folder-checked" />
                </div>
                <div class="title">盘点单</div>
                <div class="bottom">
                  <span class="label">新增</span>
                  <span class="value">{{
                    todoData.length && todoData[2].value1
                  }}</span>
                  <span class="label">待审核</span>
                  <span class="value" style="color: rgb(255, 113, 0)">{{
                    todoData.length && todoData[2].value2
                  }}</span>
                </div>
              </div>
            </el-col>
          </div>
        </div>
      </div>
      <div class="right fff">
        <div class="notes">
          <div class="subject">通知/公告</div>
          <div class="item">
            <hr>
            <div class="title">紧急盘点通知</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
          <div class="item">
            <hr>
            <div class="title">运维服务更新通知</div>
            <div class="time">2021.01.25 18:23:14</div>
          </div>
          <div class="item">
            <hr>
            <div class="title">客户入库变更通知</div>
            <div class="time">2021.01.26 18:23:14</div>
          </div>
          <div class="item">
            <hr>
            <div class="title">五一放假通知</div>
            <div class="time">2021.02.15 18:23:14</div>
          </div>
          <div class="item">
            <hr>
            <div class="title">品达物流系统对接通知</div>
            <div class="time">2021.3.25 18:23:14</div>
          </div>
        </div>
      </div>
    </el-row>
    <!-- 任务导航 -->
    <el-row class="tasks fff">
      <div class="subject">任务导航</div>
      <div class="item-list">
        <div
          class="item"
          @click="$router.push('/manage-storage-in/task-receive')"
        >
          <div class="icon" style="background: #0076ff">
            <i class="el-icon-truck" />
          </div>
          <div class="title">收货任务</div>
        </div>
        <div class="item" @click="$router.push('/manage-storage-in/task-add')">
          <div class="icon" style="background: rgb(82, 212, 243)">
            <i class="el-icon-upload2" />
          </div>
          <div class="title">上架任务</div>
        </div>
        <div class="item" @click="$router.push('/manage-storage/list-task')">
          <div class="icon" style="background: rgb(255, 113, 0)">
            <i class="el-icon-help" />
          </div>
          <div class="title">盘点任务</div>
        </div>
        <div
          class="item"
          @click="$router.push('/manage-storage-out/task-picking')"
        >
          <div class="icon" style="background: rgb(255, 96, 158)">
            <i class="el-icon-thumb" />
          </div>
          <div class="title">拣货任务</div>
        </div>
        <div
          class="item"
          @click="$router.push('/manage-storage-out/manage-task-transfer')"
        >
          <div class="icon" style="background: rgb(255, 178, 0)">
            <i class="el-icon-phone-outline" />
          </div>
          <div class="title">交接任务</div>
        </div>
      </div>
    </el-row>
    <!-- 出入库 -->
    <el-row class="store fff">
      <el-row>
        <el-col :span="6" class="subject">入库/出库信息</el-col>
        <el-col :span="18" class="bar">
          <div class="switch">
            <div
              :class="{ item: true, active: dimension === 'w' }"
              @click="dimension = 'w'"
            >
              本周
            </div>
            <div
              :class="{ item: true, center: true, active: dimension === 'e' }"
              @click="dimension = 'e'"
            >
              本月
            </div>
            <div
              :class="{ item: true, active: dimension === 'c' }"
              @click="dimension = 'c'"
            >
              全年
            </div>
          </div>
        </el-col>
      </el-row>
      <div id="storeChart" />
    </el-row>
    <!-- 库存  库区 -->
    <el-row class="status">
      <div class="stock fff">
        <el-row class="subject"> 库存使用情况 </el-row>
        <div id="stockChart" />
      </div>
      <div class="area fff">
        <el-row class="subject"> 库区使用情况 </el-row>
        <div id="areaChart" />
      </div>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { LabelLayout } from 'echarts/features'
import { BarChart, PieChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
  PieChart,
  LabelLayout
])
import { getSumList, todo, stockUseStatus, areaUseStatus } from '@/api/home'

export default {
  name: 'Dashboard',
  data() {
    return {
      dimension: 'w', // 出入库请求条件
      todoData: [],
      stockData: [],
      areaData: {},
      sumList: {}
    }
  },
  watch: {
    dimension() {
      this.getSumList()
    }
  },
  created() {
    this.todo()
  },
  async mounted() {
    this.getSumList()
    this.stockUseStatus()
    this.areaUseStatus()
    window.onresize = () => {
      this.randerStoreChart().resize()
      this.randerStatusChart().resize()
      this.randerAreaChart().resize()
    }
  },
  methods: {
    async todo() {
      const { data } = await todo()
      this.todoData = data
    },
    async getSumList() {
      const { data } = await getSumList({ dimension: this.dimension })
      this.sumList = data
      this.randerStoreChart()
    },
    async stockUseStatus() {
      const { data } = await stockUseStatus()
      this.stockData = data
      this.randerStatusChart()
    },
    async areaUseStatus() {
      const { data } = await areaUseStatus()
      this.areaData = data
      this.randerAreaChart()
    },
    randerStoreChart() {
      const chartDom = document.getElementById('storeChart')
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          x: '4%', // x 偏移量
          y: '5%', // y 偏移量
          width: '95%', // 宽度
          height: '79%' // 高度
        },
        xAxis: {
          type: 'category',
          data: this.sumList.x,
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        legend: {
          bottom: '2%',
          data: [this.sumList.data[0].name, this.sumList.data[1].name]
        },
        series: [
          {
            name: this.sumList.data[0].name,
            data: this.sumList.data[0].data,
            type: 'bar',
            barGap: 0,
            barWidth: '40%',
            itemStyle: {
              color: '#ff7100'
            }
          },
          {
            name: this.sumList.data[1].name,
            data: this.sumList.data[1].data,
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
              color: '#ffb200'
            }
          }
        ]
      }
      option && myChart.setOption(option)
      return myChart
    },
    randerStatusChart() {
      const chartDom = document.getElementById('stockChart')
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item',
          borderWidth: 0,
          backgroundColor: '#fffd',
          formatter: '{b}: {d}%\n'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              fontSize: '15',
              fontWeight: 'bold',
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold',
                color: function(colors) {
                  const colorList = ['#E4DBDA', '#FFAA00']
                  return colorList[colors.dataIndex]
                }
              }
            },
            data: this.stockData,
            itemStyle: {
              normal: {
                color: function(colors) {
                  const colorList = ['#E4DBDA', '#FFAA00']
                  return colorList[colors.dataIndex]
                }
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
      return myChart
    },
    randerAreaChart() {
      const chartDom = document.getElementById('areaChart')
      const myChart = echarts.init(chartDom)
      // 接口数据为空
      const data = this.areaData.length ? this.areaData : [
        { value: 348, name: '拣货区' },
        { value: 487, name: '出库区' },
        { value: 677, name: '暂存区' },
        { value: 126, name: '进货暂存区' },
        { value: 298, name: '出货暂存区' }
      ]
      const sum = data.reduce((s, i) => s + i.value, 0)
      const option = {
        tooltip: {
          textStyle: {
            color: '#fff' },
          trigger: 'item',
          borderWidth: 0,
          backgroundColor: '#0008',
          formatter: '{b}: {d}%\n'
        },
        legend: {
          // selectedMode: false, // 取消图例上的点击事件
          type: 'plain',
          icon: 'circle',
          orient: 'vertical',
          left: '50%',
          top: '20%',
          align: 'left',
          itemGap: 25,
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          symbolKeepAspect: false,

          itemStyle: { borderWidth: 0 },
          textStyle: {
            color: '#000',
            rich: {
              name: {
                verticalAlign: 'right',
                align: 'left',
                width: 35,
                fontSize: 12
              },
              value: {
                align: 'left',
                width: 60,
                fontSize: 12
              },
              count: {
                align: 'left',
                width: 80,
                fontSize: 12
              },
              upRate: {
                align: 'left',
                fontSize: 12,
                color: '#00cf90'
              },
              downRate: {
                align: 'left',
                fontSize: 12,
                color: '#ff5722'
              }
            }
          },
          data: data.map((item) => item.name),
          formatter: function(name) {
            let className = 'upRate'
            let rateIcon = '▲'
            if (data && data.length) {
              for (var i = 0; i < data.length; i++) {
                if (name === data[i].name) {
                  if (data[i].rate < 0) {
                    className = 'downRate'
                    rateIcon = '▼'
                  }
                  return (
                    '{name| ' +
                    name +
                    '}                  ' +
                    '{count| ' +
                    ((data[i].value / sum) * 100).toFixed() +
                    '%} ' +
                    '{value| ' +
                    data[i].value +
                    '}'
                  )
                }
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: '70%',
            left: '-300',
            itemStyle: {
              borderWidth: 2,
              borderColor: '#fff',
              color: function(colors) {
                const colorList = [
                  '#0076ff',
                  '#52d4f3',
                  '#5d7092',
                  '#ffb200',
                  '#ff7100'
                ]
                return colorList[colors.dataIndex]
              }
            },
            label: {
              show: true,
              fontSize: '15',
              position: 'inside',
              formatter: '{c}',
              color: '#fff'
            },
            data,
            emphasis: {
              itemStyle: {
                borderWidth: 5
              },
              scaleSize: 10
            }
          }
        ]
      }

      option && myChart.setOption(option)
      return myChart
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .el-row {
    margin-bottom: 20px;
  }
  .static {
    display: flex;
    height: 450px;
    .left {
      flex: 7;
      display: flex;
      flex-direction: column;
      margin-right: 30px;
      .card {
        height: 148px;
        position: relative;
        background: linear-gradient(270deg, #ffc771, #ffa634);
        box-shadow: 0 0 6px 0 rgb(188 151 69 / 12%);
        border-radius: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fff;
        line-height: 25px;
        .imgL {
          position: absolute;
          top: 0;
          left: 0;
          height: 148px;
        }
        .imgR {
          position: absolute;
          top: 0;
          right: 0;
          height: 148px;
        }
        .avatar {
          position: absolute;
          top: 31px;
          left: 43px;
          width: 62px;
          height: 62px;
          border-radius: 50%;
        }
        .username {
          position: absolute;
          left: 34px;
          bottom: 20px;
          width: 80px;
          font-size: 16px;
          color: #332929;
          line-height: 22px;
          text-align: center;
        }
        .subject-title {
          position: absolute;
          top: 20px;
          left: 200px;
          font-size: 18px;
        }
        .subject-author {
          position: absolute;
          top: 60px;
          left: 400px;
          font-size: 16px;
        }
        .site {
          position: absolute;
          top: 20px;
          right: 20px;
          width: 147px;
          height: 40px;
          background: #f8f5f5;
          border-radius: 6px;
          opacity: 0.79;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-around;
          color: #333;
        }
      }
      .info {
        flex: 1;
        margin-top: 20px;
        .subject {
          margin-bottom: 19px;
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #332929;
          line-height: 22px;
        }
        .item-list {
          display: flex;
          justify-content: space-around;
          .el-col {
            flex: 1;
            &.center {
              margin: 0 30px;
            }
            .backlog {
              position: relative;
              height: 186px;
              background: #fbf7f7;
              border-radius: 8px;
              padding: 20px;
              cursor: pointer;
              &:hover {
                background: hsla(0, 0%, 100%, 0.8);
                box-shadow: 0 2px 12px 0 rgb(0 0 0 / 6%);
                border-radius: 8px;
                border: 1px solid #f5efee;
              }
              .icon {
                width: 49px;
                height: 49px;
                background: #0076ff;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                i {
                  font-size: 32px;
                  color: #f8f5f5;
                }
              }
              .title {
                position: absolute;
                top: 34px;
                left: 85px;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #332929;
                line-height: 22px;
              }
              .bottom {
                position: absolute;
                bottom: 20px;
                .label {
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #887e7e;
                  margin-right: 10px;
                  vertical-align: super;
                }
                .value {
                  font-size: 36px;
                  font-family: DIN-Medium, DIN;
                  font-weight: 500;
                  color: #332929;
                  margin-right: 20px;
                }
              }
            }
          }
        }
      }
    }
    .right {
      width: 261px;
      .notes {
        padding: 5px;
        .subject {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #332929;
          line-height: 22px;
        }
        .item {
          margin-top: 15px;
          hr {
            width: 201px;
            height: 1px;
            border: 0;
            background-color: #f5efee;
          }
          .title {
            width: 195px;
            height: 18px;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #332929;
            line-height: 18px;
            margin-top: 15px;
          }
          .time {
            width: 115px;
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #887e7e;
            line-height: 17px;
            margin-top: 10px;
          }
        }
      }
    }
  }
  .tasks {
    height: 188px;
    .subject {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .item-list {
      margin-top: 19px;
      display: flex;
      justify-content: space-between;
      .item {
        width: 18%;
        position: relative;
        height: 93px;
        background: #fbf7f7;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        &:hover {
          background: hsla(0, 0%, 100%, 0.8);
          box-shadow: 0 2px 12px 0 rgb(0 0 0 / 6%);
          border-radius: 8px;
          border: 1px solid #f5efee;
        }
        .icon {
          width: 50px;
          height: 50px;
          border-radius: 25px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          i {
            font-size: 28px;
            color: #f8f5f5;
          }
        }
        .title {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #332929;
          line-height: 22px;
        }
      }
    }
  }
  .store {
    height: 500px;
    .el-row {
      margin: 0;
      .subject {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #332929;
        line-height: 22px;
      }
      .bar {
        display: flex;
        justify-content: right;
        height: 36px;
        .switch {
          display: flex;
          align-items: center;
          width: 208px;
          height: 100%;
          border: 1px solid #dcdfe6;
          overflow: hidden;
          border-radius: 5px;
          .item {
            flex: 1;
            height: 36px;
            line-height: 36px;
            text-align: center;
            cursor: pointer;
            &.active {
              background-color: #ffb200;
              color: #fff;
            }
            &.center {
              border-left: 1px solid #dcdfe6;
              border-right: 1px solid #dcdfe6;
            }
          }
        }
      }
    }
    #storeChart {
      width: 100%;
      height: 430px;
    }
  }
  .status {
    display: flex;
    height: 354px;
    .subject {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
      margin-bottom: 0;
    }
    .stock {
      flex: 3;
      margin-right: 30px;
    }
    .area {
      flex: 7;
    }
    #stockChart,
    #areaChart {
      height: 280px;
    }
  }
}
</style>
